<template>
  <div>
    <div ref="chart1" class="chart1" />
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "lineChart",
  data() {
    return {
      chart1: null,
    };
  },
  methods: {
    initChart() {
      if (this.chart1) {
        // 销毁对象
        this.chart1.dispose();
      }
      // 基于准备好的dom，初始化echarts实例
      this.chart1 = echarts.init(this.$refs.chart1, "light");
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        color: ["#4993f6", "#e07ca1"],
        legend: {
          data: ["2020", "2021"],
          top: 20,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "2020",
            type: "line",
            stack: "总量",
            areaStyle: {
              color: "#fff",
              opacity: 0.5,
            },
            data: [
              120, 136, 250, 340, 
              650, 780, 1200, 1600, 
              1700, 1000, 600, 480,
            ],
          },
          {
            name: "2021",
            type: "line",
            stack: "总量",
            areaStyle: {
              opacity: 0,
            },
            data: [
              200, 360, 500, 680, 
              780, 820, 932, 901, 
              934, 1290, 1330, 1320,
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.chart1.setOption(option);
    },
  },
  mounted() {
    //挂载完成
    this.initChart();
    window.addEventListener("resize", this.initChart, false);
  },
  beforeDestroy() {
    // 销毁前
    window.removeEventListener("resize", this.initChart, false);
  },
};
</script>

<style lang="scss" scoped>
.chart1 {
  width: 100%;
  height: 500px;
  background-color: #c7e4db;
}
</style>